// VARIABLES

$sHim: #4EB4B3;
$lHim: mix($sHim, #FFF, 50%);
$dHim: mix($sHim, #000, 90%);

$sHer: #F16257;
$lHer: mix($sHer, #FFF, 50%);
$dHer: mix($sHer, #000, 90%);

$gray1: #FAFAFA;
$gray2: #EEEEEE;
$gray3: #DDDDDD;
$gray4: #555555;
$gray5: #3C3D3F;

$aHover: #999999;
$social: #67686A;
$title: #444444;

@import "mixins";

// COMMON

.him{
    color: $sHim;
    &:hover{
        color: $dHim;
    }
}

.her{
    color: $sHer;
    &:hover{
        color: $dHer;
    }
}

body{
    min-width: 300px;
}

a{
    color: #FFF;
    &:hover{
        color: $aHover;
    }
}

h3{
    font-size: 14px;
}

hr{
    margin: 0;
    border-color: $gray2;
}

.sher.her{
    cursor: default;
    &:hover{
        background-color: $sHer;
    }
}

.shim.him{
    cursor: default;
    &:hover{
        background-color: $sHim;
    }
}

header {
    .top {
        &.her{
            background-color: $sHer;
            .icon{
                color: $lHer;
                &:hover{
                    color: #FFF;
                }
            }
            .logo:hover{
                opacity: 0.5;
            }
        }
        &.him{
            background-color: $sHim;
            .icon{
                color: $lHim;
                &:hover{
                    color: #FFF;
                }
            }
            .logo:hover{
                opacity: 0.5;
            }
        }
        div {
            line-height: 80px;
        }
        a {
            line-height: 80px;
        }
        .icon {
            height: 80px;
            width: 60px;
            color: $gray3;
            font-size: 21px;
            text-align: center;
            cursor: pointer;
            &:hover{
                color: #000;
            }
        }
        .logo{
            display: block;
            width: 170px;
            margin: auto;
            text-align: center;
            cursor: pointer;
            &:hover{
                opacity: 0.133;
            }
        }
        img {
        height: 30px;
        }
    }
    .navBgh{
        width: 100%;
        background: url('../content/bg.png') no-repeat;
        background-size: cover;
        background-position: 49.99% 49.99%;
    }
    .navBgc{
        height: 200px;
        width: 100%;
        background: url('../content/bgc.png') no-repeat;
        background-size: cover;
        background-position: 49.99% 49.99%;
    }
    nav {
        max-width: 320px;
        margin: auto;
        a{
            display: inline-block;
            width: 50%;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
            &.him{
                background-color: $sHim;
                &:hover{
                    background-color: $dHim;
                }
            }
            &.her{
                background-color: $sHer;
                &:hover{
                    background-color: $dHer;
                }
            }
        }
    }
}

footer{
    text-align: center;
    .ofertas{
        height: 120px;
        text-align: center;
        background-color: $gray1;
        border-top: 1px solid $gray2;
        border-bottom: 1px solid $gray2;
        padding: 30px 0 23px 0;
        div:first-child{
            color: $title;
        }
    }
    form{
        margin-top: 10px;
    }
    input{
        vertical-align: top;
        width: 220px;
        height: 40px;
        border: 1px solid $gray3;
        padding-left: 15px;
        &::-webkit-input-placeholder{
            color: $aHover;
            opacity: 1;
        }
        &:-moz-placeholder{
            color: $aHover;
            opacity: 1;
        }
        &::-moz-placeholder{
            color: $aHover;
            opacity: 1;
        }
        &:-ms-input-placeholder{
            color: $aHover;
            opacity: 1;
        }
    }
    button{
        vertical-align: top;
        height: 40px;
        width: 60px;
        color: #FFF;
        margin-left: -1px;
        border: 0;
        background-color: $sHer;
        &:hover{
            background-color: $dHer;
        }
        font-size: 20px;
        padding: 0;
    }
    .dark{
        .row{
            max-width: 100%;
        }
        background-color: $gray5;
        padding-bottom: 30px;
        ul{
            margin: 0;
        }
        nav a{
            display: block;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid $gray4;
            
        }
        div p{
            font-size: 12px;
            line-height: 14px;
            color: $social;
            margin: 0 25px 28px 25px;
            a{
                color: $social;
                text-decoration: underline;
                &:hover{
                    color: #FFF;
                }
            }
        }
        .social{
            text-align: center;
            font-size: 42px;
            line-height: 80px;
            a{
                color: $social;
                &:hover{
                    color: #FFF;
                }
            }
        }
        .imgBf{
            display: none;
        }
    }
}

#overlay{
    display: none;
    position:absolute;
    background-color: #000;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:50;
    opacity: 0.5;
}

main{
    .item{
        display: block;
        padding: 15px;
        border: 1px solid #FFF;
        cursor: pointer;
        &:hover{
            background-color: $gray1;
            border: 1px solid $gray1;
        }
        img{
            width: 48%;
            border: 1px solid $gray2;
            float: left;
        }
        section{
            width: 48%;
            float: right;
            h3{
                color: $title;
                margin: 0 0 5px 0;
                line-height: 25px;
                font-weight: normal;
            }
            .price{
                color: $aHover;
                line-height: 25px;
            }
            .colorBox{
                line-height: 25px;
                margin: 5px 5px 5px 0;
                float: left;
                background-color: $sHim;
                width: 14px;
                height: 14px;
            }
        }
    }
    .fColor, .fSize{
        color: $aHover;
        line-height: 50px;
        background-color: #FFF;
        border: 1px solid $gray2;
        padding: 0 10px 0 13px;
        i{
            line-height: 50px;
            float: right;
        }
    }
    .color, .size{
        float: right;
    }
    .size{
        color: $sHer;
        font-size: 16px;
        margin-right: 10px;
    }
    .color{
        height: 30px;
        width: 30px;
        background-color: $sHer;
        margin: 10px 10px 10px 0;
    }
    .dd{
        height: 50px;
        line-height: 50px;
        z-index: 2;
        .current{
            padding: 0 10px;
        }
        ul{
            height: 0px;
            z-index: 3;
        }
        &:hover{
            .current{
                @include bShadow(0px 0px 2px rgba(0,0,0, 0.2));
                border: none;
            }
            ul{
                height: 153px;
            }
        }
        li{
            color: $aHover;
            line-height: 50px;
            padding: 0 10px;
            border-top: 1px solid $gray1;
            &:hover{
                color: $gray3;
            }
        }
    }
    .details{
        border-top: 1px solid $gray2;
        text-align: left;
        padding: 0 15px;
        div{
            width: 100%;
        }
    }
    h4.det{
        font-size: 14px;
        color: $aHover;
        font-weight: normal;
        margin: 30px 0 10px 0;
    }
    p.det{
        font-size: 12px;
        color: $title;
        margin: 0;
        line-height: 14px;
    }
}


.dd{
    position: relative;
    ul{
        list-style-type: none;
        height: 0px;
        margin: 0;
        overflow: hidden;
        list-style-type: none;
        background-color: #FFF;
        @include bShadow(0px 1px 2px rgba(0,0,0, 0.2));
        @include transition(0.2s, height);
    }
    &:hover{
        .current{
            @include bShadow(0px 1px 2px rgba(0,0,0, 0.2));
        }
        ul{
            height: 183px;
        }
    }
    li{
        cursor: pointer;
    }
}

// MENU

.cbp-spmenu {
    z-index: 51;
    background: $gray5;
    position: fixed;
    overflow-y: auto;
    .social{
        margin: 20px 0 0 30px;
        font-size: 34px;
    }
}

.cbp-spmenu h2 {
    color: $gray4;
    margin: 0;
    font-size: 16px;
    line-height: 57px;
    font-weight: bold;
    border-bottom: 1px solid $gray4;
    padding: 0 20px 0 30px;
    i{
        color: #FFF;
        float: right;
        line-height: 1;
        margin-top: 20px;
        cursor: pointer;
        &:hover{
            color: $gray4;
        }
    }
}

.cbp-spmenu > a {
    display: block;
    line-height: 50px;
    padding-left: 30px;
    border-bottom: 1px solid $gray4;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
	left: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
	left: 0px;
}

/* Transitions */

.cbp-spmenu {
	@include transition(0.3s);
}

/* Example media queries */

@media screen and (max-height: 26.375em){

	.cbp-spmenu-vertical {
		font-size: 90%;
		width: 190px;
	}

	.cbp-spmenu-left {
		left: -190px;
	}
}

// HOME

#home{
    h2{
        margin: 10px 0 0 0;
        text-align: center;
        line-height: 50px;
        img{
            width: 160px;
        }
    }
    nav {
        max-width: 320px;
        margin: auto;
        a{
            line-height: 60px;
            text-align: center;
            text-decoration: underline;
        }
    }
}

// CATEGORY

#category{
    div.order, div.filter{
        height: 60px;
        color: $aHover;
        span{
            color: $title;
            font-weight: bold;
        }
        i{
            margin-left: 10px;
            color: $title;
            &.icon-remove{
                font-size: 11px;
                vertical-align: 20%;
            }
        }
    }
    #fBotLine{
        display: none;
    }
    .filter > div{
        display: inline-block;
        height: 30px;
        border: 1px solid #FFF;
        @include bRadius(7px);
        margin: 14px 0;
        line-height: 30px;
        padding: 0 10px;
        &:active{
            background-color: $gray1;
        }
    }
    .order{
        position: relative;
        label{
            float: right;
            display: none;
            color: $title;
            font-weight: bold;
            padding: 0 10px;
            line-height: 60px;
        }
        .dd{
            float: right;
            display: inline-block;
            height: 60px;
            line-height: 60px;
            z-index: 4;
            .current{
                padding: 0 10px;
            }
            ul{
                height: 0px;
            }
            &:hover{
                ul{
                    height: 183px;
                }
            }
            li{
                line-height: 60px;
                padding: 0 10px;
                border-top: 1px solid $gray1;
                &:hover{
                    color: $gray3;
                }
            }
        }
    }
    #filters{
        overflow: hidden;
        height: 0;   
        background-color: $gray1;
        & > div > div {
            margin: 12px 0;
        }
        &.visible{
            overflow: visible;
        }
    }
    &>section{
        text-align: center;
        padding: 35px 0;
        h2{
            font-size: 18px;
            font-weight: 600;
            margin: 0 0 5px 0;
            line-height: 26px;
        }
        p{
            margin: 0;
            font-size: 12px;
            line-height: 19px;
        }
        &.her{
            h2{
                color: #FFF;
            }
            background-color: $sHer;
            color: #FFF;
        }
        &.him{
            h2{
                color: #FFF;
            }
            background-color: $sHim;
            color: #FFF;
        }
        
    }
}

// ITEM

.breadcrumbs {
    line-height: 65px;
    color: $aHover;
    text-align: center;
    span{
        padding: 0 11px;
    }
    .tit{
        color: $title;
        font-weight: bold;
    }
}
#item{
    .selected{
        text-align: center;
        .gallery{
            position: relative;
        }
        .currImg{
            width: 100%;
            height: auto;
        }
        .slider{
            width: 270px;
            margin: 20px auto;
            .slide{
                width: 33%;
                display: inline-block;
                padding: 0 5px;
                img{
                    width: 100%;
                    height: auto;
                }
            }
        }
        h3{
            line-height: 64px;
            margin: 0;
            font-size: 28px;
            font-weight: normal;
            color: $title;
        }
        .price{
            font-size: 18px;
            color: $sHer;
            line-height: 1;
        }
        .dd{
            float: left;
            display: inline-block;
            width: 48%;
            margin: 27px 0;
            text-align: left;
        }
        button{
            color: #FFF;
            width: 100%;
            height: 50px;
            border: none;
            font-size: 16px;
            &.her{
                background-color: $sHer;
                &:hover{
                    background-color: $dHer;
                }
            }
            &.him{
                background-color: $sHim;
                &:hover{
                    background-color: $dHim;
                }
            }
            i{
                padding-right: 10px;
            }
        }
        .cambio{
            font-size: 12px;
            color: $aHover;
            line-height: 60px;
            a{
                color: $aHover;
                text-decoration: underline;
                &:hover{
                    color: #000;
                }
            }
        }
    }
    .products{
        border-top: 1px solid $gray2;
        margin-top: 50px;
        height: 61px;
        overflow: hidden;
        h2{
            margin: 0;
            line-height: 60px;
            padding: 0 15px;
            text-align: left;
            img{
                width: 166px;
            }
            i{
                font-size: 14px;
                float: right;
                line-height: 60px;
                color: $aHover;
            }
        }
   }
}

// CART

#cart{
        h2{
            line-height: 75px;
            margin: 0;
            text-align: center;
            border-top: 1px solid $gray2;
            img{
                width: 157px;
            }
        }
    .items{
        width: 100%;
        overflow: auto;
        border-top: 1px solid $gray2;
        border-bottom: 1px solid $gray2;
    }
    .item{
        width: 100%;
        border-bottom: 1px solid $gray2;
        cursor: default;
        &:hover{
            background-color: #FFF;
        }
        .sizeBox{
            float: left;
            margin: 5px 0 0 5px;
        }
        .qty{
            width: 100%;
            clear: both;
            color: $aHover;
            padding-top: 20px;
            input{
                height: 34px;
                width: 34px;
                border: 1px solid $gray3;
                text-align: center;
                color: $sHer;
                font-size: 16px;
                margin: 0 40px 0 10px;
                @include bRadius(5px);
            }
            button{
                display: inline;
                vertical-align: top;
                background-color: #FFF;
                color: $aHover;
                height: 34px;
                border: 1px solid $gray3;
                @include bRadius(5px);
                &:hover{
                    color: $title;
                }
            }
        }
    }
    .total{
        float: left;
        width: 100%;
        line-height: 50px;
        background-color: $gray1;
        text-align: center;
        color: $aHover;
        font-weight: bold;
        padding: 0 15px;
        .price{
            margin-left: 8px;
            font-size: 18px;
            color: $sHer;
            font-weight: normal;
        }
    }
    & > .row{
        margin-bottom: 30px;
    }
    button.her{
        display: block;
        width: 100%;
        height: 50px;
        margin: 20px 0 35px 0;
        background-color: $sHer;
        font-size: 16px;
        color: #FFF;
        border: none;
        i{
            margin-right: 15px;
        }
        &:hover{
            background-color: $dHer;
        }
    }
    .buy{
        text-align: center;
    }
    .continue{
        width: 100%;
        color: $aHover;
        text-decoration: underline;
        text-align: center;
    }
    h4.det{
        margin: 30px 0 5px 0;
    }
}